<template>
  <div id='wrap'>
    <h1>声明响应式状态 Ref & reactive</h1>
    <h3>ref() 函数</h3>
    <p>{{ numC }}</p>
    <p>{{ dataStr }}</p>
    <p>{{ dataNumC }}</p>
    <p>{{ dataBool ? dataStr :'阿里巴巴' }}</p>
    <p>
        <button type="button" @click="changenumC">普通变量累计</button>
        <button type="button" @click="changDataNumC">响应式变量的累加</button>
        <button type="button" @click="changDataNumC1">响应式变量的累加带动普通变量增加</button>
    </p>
    <hr>
    <h3>ref()函数 - 深层响应性</h3>
    <button @click="editAllRefData">ref深层影响</button>
    <p>{{ `序号:${dataObj1.count};学习内容:${dataObj1.strArr};姓名:${dataObj1.user.name};性别:${dataObj1.user.sex};年龄:${dataObj1.user.age};` }}</p>
    <p @click="accDataobjCount">dataObj1.count:{{ dataObj1.count }}</p>
    <ul @click="edditSex">
        <li v-for="(item,index) in dataObj1.strArr" :key="index" @click="pushDataObjStrArr">{{ item }}</li>
    </ul>
    <ul>
        <li v-for="(item,index,key) in dataObj1.user" :key="index">key:{{ key }}---value:{{ item }}---index:{{ index }}</li>
    </ul>
    <hr>
    <button @click="editAllRefData2">reactive深层影响</button>
    <p>{{ `序号:${dataObj2.count};学习内容:${dataObj2.strArr};姓名:${dataObj2.user.name};性别:${dataObj2.user.sex};年龄:${dataObj2.user.age};` }}</p>
    <p @click="accDataobjCount2">dataObj1.count:{{ dataObj2.count }}</p>
    <ul @click="edditSex2">
        <li v-for="(item,index) in dataObj2.strArr" :key="index" @click="pushDataObjStrArr2">{{ item }}</li>
    </ul>
    <ul>
        <li v-for="(item,index,key) in dataObj2.user" :key="index">key:{{ key }}---value:{{ item }}---index:{{ index }}</li>
    </ul>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'scuss'
}
</script>

<script lang='ts' setup>
import { reactive,ref,type Ref } from 'vue'
let numC=0
const dataNumC:Ref<number>=ref(0)
const dataStr=ref<string>('鸿蒙开发')
const dataBool=ref<boolean>(true)
const changenumC=()=>{
    numC++
}
const changDataNumC=()=>{
    dataNumC.value++
}
const changDataNumC1=()=>{
    dataNumC.value++
    numC++
}
interface Iuser{
    name:string,
    sex:string,
    age:number
}
interface IdataObj1<T>{
    count:number,
    strArr:string[],
    user:T
}
const dataObj1=ref<IdataObj1<Iuser>>({
  count:0,
  strArr:['PHP','刘强东','码云','蔡徐坤','雷军','任正非','马化腾'],
  user:{
    name:'许家印',
    sex:'男',
    age:42
  }  
})
const editAllRefData=()=>{
    dataObj1.value={
        count:1,
        strArr:['鸿蒙开发','刘强东','码云','蔡徐坤','雷军','任正非','马化腾'],
        user:{
            name:'小明',
            sex:'男',
            age:16
        }
    }
}
const accDataobjCount=()=>{
    dataObj1.value.count++
}
const pushDataObjStrArr=()=>{
    dataObj1.value.strArr.push('张柏芝')
}
const edditSex=()=>{
    dataObj1.value.user.sex='女'
}
const dataObj2=reactive<IdataObj1<Iuser>>({
    count:0,
    strArr:['PHP', '刘强东', '码云', '蔡徐坤', '雷军', '任正非', '马化腾'],
    user:{
        name:'小红',
        sex:'男',
        age:16
    }
})
const editAllRefData2=()=>{
    console.log('aaaa');
    dataObj2.count=1
    dataObj2.strArr[0]='鸿蒙开发'
    dataObj2.user.name='小小'
    dataObj2.user.sex='女'
}
const accDataobjCount2=()=>{
    dataObj2.count++
}
const pushDataObjStrArr2=()=>{
    dataObj2.strArr.push('张柏芝')
}
const edditSex2=()=>{
    dataObj2.user.sex='女'
}
</script>

<style scoped lang='scss'>
.active {
  color: darkorange;
}

.text-danger {
  background-color: red;
}

.text-success {
  background-color: green;
}

.active-new {
  font-size: 22px;
}
</style>